<template>
    <div class='fxn-body'>
        <div class="fxn-top">
            <el-page-header :icon="ArrowLeft" @back="handleBack">
                <template #content>
                    <span> {{title}} </span>
                </template>
            </el-page-header>
        </div>
        <!-- Top End -->
        <div class="fxn-section wrap-fixed fxn-margin-t-20">
            <el-table v-loading="loading" border :data="listData">
                <el-table-column label="ID" prop="id" width="80" />
                <el-table-column label="所属企业" prop="name"/>
                <el-table-column label="用户名" prop="user_name"/>
                <el-table-column label="姓名" prop="real_name"/>
                <el-table-column label="创建时间" prop="add_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.add_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="最近一次登录时间" prop="login_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.login_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="最近一次登录IP" prop="login_ip"/>
                <el-table-column label="登录次数" prop="login_times"/>
            </el-table>
        </div>
        <!-- Section End -->
        <div class="fxn-page fixed">
            <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- Page End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 0,
                perPage: 10,
                loading: false,
                listData: [],

                //企业名称
                title: router.currentRoute.value.query.name,
            })

            //列表
            const getList = (page,perPage) => {
                state.loading = true;
                proxy.$http.get('/sys/Company/members',{
                    page: page ? page : 1,
                    perPage: perPage ? perPage : 10,
                    company_id: router.currentRoute.value.query.id,
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //返回上一页
            const handleBack = () => {
                router.push('/TeamManage');
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                
                //组件方法
                handleBack,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>